<template>
  <div
    class="container"
    id="login-container"
  >
    <div class="title">
      枣庄市公安局{{ title }}
    </div>
    <div class="login">
      <div class="header">
        <img
          :src="require('@/assets/img/login-icon.png')"
          alt="login-icon"
        >
        <div>
          <p>Hi,欢迎您登录</p>
          <p>{{ title }}</p>
        </div>
      </div>
      <div style="text-align: center;margin-bottom: 20px">
        <el-radio-group
          v-model="type"
          size="mini"
        >
          <el-radio-button label="password">
            用户密码登录
          </el-radio-button>
          <el-radio-button label="phone">
            手机验证码登录
          </el-radio-button>
        </el-radio-group>
      </div>
      <!--      密码登录-->
      <el-form
        v-show="type==='password'"
        ref="form"
        :model="form"
        :rules="rules"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="form.userName"
            placeholder="请输入用户名/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <!--      验证码登录-->
      <el-form
        v-show="type==='phone'"
        ref="formPhone"
        :model="formPhone"
        :rules="rulesPhone"
      >
        <el-form-item prop="phone">
          <el-input
            v-model="formPhone.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="formPhone.code"
            placeholder="请输入验证码"
          >
            <el-button
              :disabled="!!remainingTime"
              @click="sendMsg"
              slot="append"
            >
              {{ !!remainingTime?`${remainingTime} 秒`:"获取验证码" }}
            </el-button>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button
        @click="login"
        type="primary"
        style="width: 100%;"
      >
        登录
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginVue',
    data () {
      return {
        title: TITLE,
        type: 'phone',
        remainingTime: 0,
        form: {
          userName: '',
          password: ''
        },
        formPhone: {
          phone: '',
          code: ''
        },
        rules: {
          userName: [
            { required: true, message: '请输入用户名/手机号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },
        rulesPhone: {
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: this.$_util.regexp.mobilePhone, message: '手机格式不正确', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      async sendMsg () {
        if (!this.$_util.regexp.mobilePhone.test(this.formPhone.phone)) {
          this.$message.error('手机格式不正确，请重新输入')
          return
        }
        await this.$service.gzl.sendLoginMsg(this.formPhone.phone)
        this.remainingTime = 60
        const interval = setInterval(() => {
          if (!this.remainingTime) return clearInterval(interval)
          this.remainingTime--
        }, 1000)
        this.$message.success('验证码发送成功，请注意查收')
      },
      validate (form = 'form') {
        return new Promise((resolve, reject) => {
          this.$refs[form].validate(valid => {
            console.log(valid)
            if (valid) return resolve(true)
            reject(new Error('fail'))
          })
        })
      },
      // 保存用户信息
      async saveUserInfo (data) {
        sessionStorage.setItem('user_info', JSON.stringify(data.data))
        const { err: errNode, data: dataNode } = await this.$service.gzl.getUserNodes()
        if (errNode) {
          sessionStorage.clear()
          return
        }
        console.log(dataNode)
        sessionStorage.setItem('nodes', JSON.stringify(dataNode.data))
        this.$router.push('/')
      },
      // 密码登录
      async loginDefault () {
        await this.validate()
        const { data } = await this.$service.gzl.login({ phone: this.form.userName, password: this.form.password })
        this.saveUserInfo(data)
      },
      // 验证码登录
      async loginByMsg () {
        await this.validate('formPhone')
        const { data } = await this.$service.gzl.loginByMsg(this.formPhone)
        this.saveUserInfo(data)
      },
      async login () {
        const method = this.type === 'password' ? this.loginDefault : this.loginByMsg
        method()
      }
    }
  }
</script>
<style>
  #login-container .el-button--primary{
    background-color: #0ba8d3;
    border-color: #0ba8d3;
  }

  #login-container .el-button--primary:active{
    background-color: #6ea8d3;
    border-color: #6ea8d3;
  }
  #login-container
  element.style {
  }
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 4px 4px 0;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner{
    background-color: #0ba8d3;
    border-color: #0ba8d3;
  }

</style>
<style scoped>
  .container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #002e83;
    background-image: url("../../assets/img/dbg-5.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
  }

  .title{
    padding-left: 100px;
    height: 72px;
    line-height: 72px;
    font-size: 22px;
    color: white;
    letter-spacing: 3px;
    border-bottom: 1px solid #eeeeee;
  }

  .login {
    width: 430px;
    height: 470px;
    box-sizing: border-box;
    padding: 60px 30px 0 30px;
    background: #fff;
    position: absolute;
    right: 220px;
    bottom: calc((100vh - 389px) / 2 - 50px);
    border: 2px solid #0ba8d3;
    box-shadow: 10px 0 15px #f0f0f0;
  }

  .header{
    margin-bottom: 25px;
  }
  .header img{
    vertical-align: top;
  }
  .header div{
    margin-left: 20px;
    display: inline-block;
    color:  #0ba8d3;
  }
  .header div p:first-child{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 14px;
  }
</style>
